<template>
	   <ls-page  title="" >
	            <view class="top-meng"></view>
	            <view class="centerStoreOther-container">
	                <view class="centerStoreOther-container-tips">为他人储值时，请确认会员手机号输入正确</view>
	                <view class="centerStoreOther-container-phone">
	                    <view class="container-phone-title">对方会员号（手机号）</view>
	                    <view class="container-phone-value">
	                        <view class="phone-value-upper">
	                            <van-cell-group class="van-cell">
	                                <image class="icon-phone" src="https://oss.jtmckj.com/wmp/qnjg/center/i_icon_phone.png" mode="aspectFill" />
	                                <van-field
	                                    custom-class="phone-value-input"
	                                    v-model="mobile"
	                                    placeholder="请输入手机号码"
	                                    :border="false"
	                                    input-class="input-class"
	                                    type="digit"
	                                />
	                            </van-cell-group>
	                            <view class="phone-value-btn" @click="onSearch">搜索</view>
	                        </view>
	                        <view :style="'display:' + (haveUser == -1 ? 'none' : 'block')">
	                            <view class="phone-value-center" :style="'display:' + (haveUser ? 'flex' : 'none')">
	                                <view class="center-icon-true-qnjq" v-if="themetype == '001'"></view>
	                                <view class="center-icon-true" v-else></view>
	                                会员验证通过！请核对会员信息后谨慎储值
	                            </view>
	                            <view class="phone-value-center spe" :style="'display:' + (haveUser ? 'none' : 'flex')">
	                                <view class="center-icon-false"></view>
	                                会员验证失败
	                            </view>
	                        </view>
	                        <view class="phone-value-lower">
	                            <van-dropdown-menu popup-style="dropdown-item" active-color="#212121">
	                                <van-dropdown-item v-model="meaberCode" :options="option1" @change="onCardChange" />
	                            </van-dropdown-menu>
								<view class="member-Name">
									{{meaberCode}}
								</view>
	                        </view>
	                    </view>
	                </view>
	                <view class="centerStoreOther-container-h2">储值方案</view>
	                <view class="centerStore-container-programme_all">
	                    <view :class="'centerStore-container-programme ' + (current == k ? 'selected' : '')" @click="selectPro" :id="k" v-for="(v, k) in programme" :key="k">
	                        <view class="programme-upper">
	                           <view class="programme-upper-left-qnjq" v-if="themetype == '001'"></view>
	                           <view class="programme-upper-left" v-else></view>
	                            <view class="programme-upper-right">
	                                <view class="upper-right-title">{{ v.Name }}</view>
	                                <view class="upper-right-value" v-if="v.schemelist[0] && v.Subtitle">
	                                    <view>{{ v.Subtitle }}</view>
	                                </view>
	                            </view>
	                        </view>
	
	                       <view class="programme-below" v-if="current == k" @click.stop="">
	                         <van-radio-group v-model="SchemeGroup" @change="onChange" direction="horizontal">
	                            <van-radio 
	                              v-for="(s, m) in v.schemelist" 
	                              :key="m" 
	                              :name="s.SchemeGroup" 
	                              use-icon-slot
									direction="horizontal"
	                            >
	                            <view class="programme-below-rec" >
	                            	<image
	                            	  slot="icon" 
	                            	  :src="SchemeGroup == s.SchemeGroup ? iconS.active : iconS.normal" 
	                            	  class="radio-img" 
	                            	/>
	                            	<!-- <view class="radio-label">{{ s.Name }}</view> -->
									<view class="radio-label">
									      <!-- 根据s.Name中的+分割字符串 -->
									      <span v-for="(part, index) in splitName(s.Name)" :key="index">
									        {{ part }}
									        <!-- 如果不是最后一部分，插入换行符 -->
									        <span v-if="index < splitName(s.Name).length - 1" class="line-break"></span>
									      </span>
									</view>
	                            </view>
	                            </van-radio>
	                          </van-radio-group>
	                       						
	                        </view>
	
	                        <!-- <view hidden="{{current!=k}}" style="height:20rpx">
	                    
	                </view> -->
	                    </view>
	                    <view class="programme-showMore" @click="isOpenHandler">
	                        {{ isOpen ? '收起更多方案' : '展开更多方案' }}
	                        <view :class="'showMore-icon ' + (isOpen ? 'showALL' : '')"></view>
	                    </view>
	                </view>
	                <view class="centerStoreOther-container-button" @click="confirmPay">
	                    <view class="container-button-item">确认储值</view>
	                </view>
	                <view class="centerStoreOther-container-read">
	                    <!-- <van-radio name="1" shape="round" checked-color="#CCCCCC" use-icon-slot @change="radioChange"> -->
	                        <image @click="radioChange" slot="icon" :src="radio ? iconS.active : iconS.normal" class="radio-icon" />
	                    <!-- </van-radio> -->
	                    <view class="container-read-center">我已阅读并同意</view>
	                    <view class="container-read-right" @click="MembeAgreement">《会员储值协议》</view>
	                </view>
	            </view>
	        </ls-page>
			<pay v-if="payShow" :show="payShow" @update:show="payShow = $event" @finishPay="finishPay($event)" payto="store" :info="payForm" />
</template>

<script setup>
		import { ref, onMounted } from 'vue';
		import { useRoute } from 'vue-router';
		import {
			HFiveMemberAppObjProcess
		} from '@/api/public.js'
		
	// 定义响应式数据
	const themetype = uni.getStorageSync('themeInfo')?.type
	const radio = ref(false); // 是否勾选隐私协议
	const mobile = ref('')
	const selectedCard = ref({})
	const option1 = ref([])
	const isOpen = ref(false)
	const haveUser = ref(-1)
	const otherCode  = ref('')
	const programme = ref([]); // 储值方案列表
	const programme1 = ref([]); // 储值方案数据
	const current = ref('-1'); // 当前选中的方案索引
	const selectedScheme = ref({}); // 选中的储值方案
	const selectedSchemeIndex = ref(0); // 选中的储值方案索引
	const SchemeCode = ref(''); // 储值方案的code
	const SchemeGroup = ref(''); // 储值方案组code
	const plan_select_src = '/static/icon/plan-select.png'; // 未选中图标
	const plan_selected_src = '/static/icon/plan-selected.png'; // 选中图标
	const myCardInfo = ref(uni.getStorageSync('cardInfo')); // 我的卡片信息
	const icon = ref({
	  normal: 'https://oss.jtmckj.com/wmp/images/center/my/i_radio_normal.png',
	 active: themetype == '001' ? 'https://oss.jtmckj.com/h5-uniapp/qnig/my/i_radio_choose.png' : 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_choose.png'
	});
	
	const iconS = ref({
	  normal: 'https://oss.jtmckj.com/wmp/images/center/my/i_radio_normal.png',
	 active: themetype == '001' ? 'https://oss.jtmckj.com/h5-uniapp/qnig/my/i_radio_choose.png' : 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_choose.png'
	});
	// 页面加载时初始化
	onMounted(() => {
	  // 获取传入的参数并赋值给 myCardInfo
	  // const options = getCurrentPage()?.options;
	  // if (options?.myCardInfo) {
	  //   myCardInfo.value = JSON.parse(options.myCardInfo);
	  // }
	  onInit();
	});
	
	// 页面初始化，检查用户是否同意隐私协议
	const onInit = () => {
		radio.value = uni.getStorageSync('isAgreeProtocol');
	};
	const splitName = (name) => {
	  return name.split('+');  // 根据 + 分割字符串
	};
	
	// 获取储值方案
	const getPlan = (card) => {
	  const contentData = {
	    typeCode: card.typeCode,
	    brandCode: card.brandCode,
	  };
	
	  HFiveMemberAppObjProcess({
	    functionName: 'GetNewSchemeList_H5',
	    contentData,
	  })
	    .then((res) => {
		  console.log(res);
	      programme1.value = res;
	      programme.value = res.slice(0, 3); // 默认显示前三个方案
	      current.value = '-1';
	      selectedSchemeIndex.value = -1;
	      selectedScheme.value = {};
	    })
	    .catch(() => {
	      programme.value = [];
	    });
	};
	
	// 处理隐私协议同意
	const radioChange = () => {
	  radio.value = !radio.value;
	  uni.setStorageSync('isAgreeProtocol',radio.value )
	};
	
	// 选择储值方案
	const selectPro = (e) => {
	  const selectedIndex = e.currentTarget.id;
	  current.value = selectedIndex;
	  SchemeCode.value = programme.value[selectedIndex]?.SchemeCode;
	  SchemeGroup.value = programme.value[selectedIndex]?.schemelist[0]?.SchemeGroup;
	};
	// 选择储值方案
	const handleScheme = (e) => {
	  const index = e.currentTarget.id;
	  selectedSchemeIndex.value = index;
	  selectedScheme.value = programme.value[current.value].schemelist[index];
	};
	const meaberCode = ref('')
	// 会员卡选择
	const onCardChange = (e) => {
	  const card = option1.value.find((item) => item.code === e);
	  meaberCode.value = card.carName;
	  console.log(meaberCode.value,'meaberCode.value')
	  getPlan(card); 
	};
	
	// 收起、展开更多方案
	const isOpenHandler = () => {
	  isOpen.value = !isOpen.value;
	  programme.value = isOpen.value ? programme1.value : programme1.value.slice(0, 3);
	  if (current.value > 2) {
	    current.value = 0;
	  }
	};
	
	// 改变手机号
	const onChange = (e) => {
		console.log(e);
	  mobile.value = e.detail;
	};
	
	// 选择储值方案的子方案
	const onChangeRadio = (e) => {
		console.log(e);
	  SchemeGroup.value = e;
	};
	
	// 搜索手机号
	const onSearch = () => {
		if(!mobile.value){
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			}); 
			return
		}
	   console.log(mobile.value);
	   HFiveMemberAppObjProcess({
	    functionName: "CheckMember_H5",
	    contentData: {
	      mobile: mobile.value,
	    },
	  })
	    .then((res) => {
			console.log(res);
	      if (res) {
	        haveUser.value = true;
	        option1.value = res.map((item) => ({
	          ...item,
	          text: item.carName ? item.carName  :'会员卡',
	          value: item.code,
	        }));
	        otherCode.value = res[0].code;
			console.log(option1.value);
	      }
	    })
	    .catch(() => {
	      haveUser.value = false;
	      option1.value = [];
	      otherCode.value = '';
	    });
	};
	const payShow = ref(false)
	const payForm = ref({})
	// 确认储值
	const confirmPay = () => {
	  // uni.showLoading({ title: '加载中', mask: true });
	
	  if (!haveUser.value) {
	    msg("请先确认会员是否存在");
	    return;
	  }
	
	  if (!radio.value) {
	    msg("请先勾选我已阅读并同意");
	    return;
	  }
	
	  if (current.value < 0) {
	    msg("请先选择储值方案");
	    return;
	  }
		const schemeCode = SchemeCode.value
		const schemeGroup = SchemeGroup.value
		payForm.value = {
			schemeCode: SchemeCode.value,
			schemeGroup: SchemeGroup.value,
			memberCode: myCardInfo.value.code,
			otherCode: selectedCard.value.code,
		}
		payShow.value = true
	 
	};
	
	const finishPay = async(e)=>{
		if(e){
			payShow.value = false
		}
	}
	
	// 显示消息
	const msg = (message) => {
	  uni.showToast({
	    title: message,
	    icon: "none",
	  });
	};
</script>

<style lang="scss" >


.centerStoreOther-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
    padding: 40rpx 24rpx 0;
    .centerStoreOther-container-tips {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: var(--maincolorf2);
        line-height: 28rpx;
        padding-bottom: 60rpx;
    }
    .centerStoreOther-container-phone {
        .container-phone-title {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: var(--maincolorf1);
            line-height: 32rpx;
            padding-bottom: 28rpx;
        }
        .container-phone-value {
            background: var(--maincolor);
            border-radius: 16rpx;
            padding: 5rpx 32rpx 30rpx;
            .phone-value-upper {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20rpx;
                border-bottom: 1px solid var(--mainbaccolor5);
                padding: 5rpx 0;
                .van-cell {
                    display: flex;
                    align-items: center;

                    .icon-phone {
                        width: 35rpx;
                        height: 40rpx;
                    }
                    .phone-value-input {
                        /* background-color: #f2f2f2 !important;*/
                        padding-left: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 32rpx !important;
                        line-height: 32rpx !important;
                        border-radius: 8px;
                        margin-left: 20rpx;
                    }
                    .input-class {
                        color: #212121 !important;
                    }
                }
                .phone-value-btn {
                    width: 160rpx;
                    height: 60rpx;
                    background: var(--mainbaccolor);
                    border-radius: 8rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: var(--dt-colorPink);
                    line-height: 60rpx;
                    text-align: center;
                }
            }
            .phone-value-center {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #666666;
                line-height: 24rpx;
                display: flex;
                align-items: center;
                padding: 20rpx 0;
                &.spe {
                    color: var(--maincolorf5);
                }
                .center-icon-true {
                    width: 27rpx;
                    height: 30rpx;
                    background-image: url('https://oss.jtmckj.com/wmp/kbq/store/i_icon_true.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    margin-right: 16rpx;
                }
				.center-icon-true-qnjq {
				    width: 27rpx;
				    height: 30rpx;
				    background-image: url('https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_icon_true.png');
				    background-size: 100% 100%;
				    background-repeat: no-repeat;
				    margin-right: 16rpx;
				}
                .center-icon-false {
                    width: 27rpx;
                    height: 30rpx;
                    background-image: url('https://oss.jtmckj.com/wmp/images/center/centerStore/i_search_false.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    margin-right: 16rpx;
                    color: #ff3333;
                }
            }
            .phone-value-lower {
                background-color: #2e2e2e;
                height: 80rpx;
				position: relative;
                /* .custom-class{*/
                /*     background-color: #212121 !important;*/
                /*     color: #212121;*/
                /* }*/
                /* .popup{*/
                /*     background-color: #212121 !important;*/
                /* }*/
                .van-dropdown-menu {
                    background: #f2f2f2;
                    border-radius: 8px;
                    height: 80rpx;
                }
				.member-Name {
					position: absolute;
					top: 25rpx;
					left: 85rpx;
					font-size: 24rpx;
					color: #212121;
				}
              ::v-deep .van-dropdown-menu__item {
                    justify-content: flex-start;
                    padding-left: 64rpx;
                    background: var(--mainbaccolor);
                    position: relative;
                    height: 80rpx;
					// border-radius: 18rpx;
                    &::before {
                        content: '';
                        position: absolute;
                        top: 24rpx;
                        left: 24rpx;
                        width: 40rpx;
                        height: 32rpx;
                        background-image: url('https://oss.jtmckj.com/wmp/kbq/store/i_icon_huiyuan.png');
                        background-size: 100% auto;
                        background-position: left center;
                        background-repeat: no-repeat;
                    }
                    &::after {
                        content: '';
                        position: absolute;
                        top: 34rpx;
                        right: 24rpx;
                        width: 18rpx;
                        height: 11rpx;
                        background-image: url('https://oss.jtmckj.com/wmp/qnjg/common/i_icon_tra-bottom-bla.png');
                        background-size: 100% auto;
                        background-position: left center;
                        background-repeat: no-repeat;
                    }
                }
                .van-dropdown-menu__title {
                    &::after {
                        display: none;
                    }
                }
                .van-ellipsis {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #212121;
                    line-height: 28rpx;
                }
                .van-dropdown-item__title {
                    color: #212121 !important;
                    white-space: nowrap;
                }
                .item-title-class {
                    color: #212121;
                }
                .van-dropdown-item__option {
                    color: #212121;
                    background: #f2f2f2 !important;
                    /* border-radius: 8px;*/
                }
                .van-popup {
                    margin-left: 56rpx;
                    background-color: #f2f2f2 !important;
                    width: 638rpx;
                }
                .van-cell {
                    background-color: #f2f2f2 !important;
                    border-bottom: 1px solid #e5e5e5;
                    border-radius: 16rpx;
                }
                .van-field__control {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 32rpx !important;
                    color: var(--maincolorf1) !important;
                    line-height: 32rpx !important;
                }
                .van-cell:after {
                    border-bottom: 1px solid #e5e5e5;
                }
				
            }
        }
    }
    .centerStoreOther-container-h2 {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: var(--maincolorf1);
        line-height: 32rpx;
        padding: 40rpx 0;
    }
    .centerStore-container-programme_all {
        .centerStore-container-programme {
            background: var(--mainbaccolor10);
            border-radius: 16rpx;
            /* border-image: radial-gradient(circle, #333333, #99948A) 1 1;*/
            padding: 32rpx 32rpx 0 32rpx;
            margin-bottom: 20rpx;
            padding-bottom: 32rpx;
            &.selected {
                border: 1px solid var(--maincolorbd);
                padding-bottom: 0rpx;
            }
            .programme-upper {
                display: flex;
                align-items: center;
                .programme-upper-left {
                    margin-right: 24rpx;
                    width: 80rpx;
                    height: 80rpx;
                    background-image: url('https://oss.jtmckj.com/wmp/kbq/store/i_icon_pro.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                }
				.programme-upper-left-qnjq {
					margin-right: 24rpx;
					width: 80rpx;
					height: 80rpx;
					background-image: url('https://oss.jtmckj.com/h5-uniapp/qnig/booktable/cu-icon.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
                .programme-upper-right {
                    .upper-right-title {
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 36rpx;
                        color: #212121;
                        line-height: 36rpx;
                        font-weight: bold;
                        /* padding-bottom: 21rpx;*/
                    }
                    .upper-right-value {
                        padding-top: 21rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 28rpx;
                        color: var(--third--self--color);
                        line-height: 28rpx;
                        padding-bottom: 10rpx;
                        .active {
                            color: #212121;
                        }
                    }
                }
            }
           .programme-below {
              background: var(--mainbaccolor10);
              border-radius: 8px;
              margin: 24rpx 0;
              .programme-below-rec{
              	display: flex;
              	align-items: center;
              	background: var(--mainbaccolor);
              	margin-bottom: 20rpx;
              	border-radius: 16rpx;
              	padding: 24rpx 24rpx 16rpx 24rpx;
              	
              	// border-bottom: 2rpx solid var(--dt-bordercolorPink);
              }
              .radio-label {
              	margin-left: 15rpx;
                  line-height: 42rpx;
              	font-size: 28rpx;
                  // padding-bottom: 10rpx;
              }
              .line-break {
                display: block; /* 使用block使得内容换行 */
                height: 0; /* 设置高度为0，避免影响布局 */
              }
              ::v-deep{
              	.van-radio__label{
              		margin: 0;
              		width: 100%;
              	}
              	.van-radio{
              		width: 100%;
              	}
              }
               .programme-below-item {
                   font-family: PingFang SC;
                   font-weight: 500;
                   font-size: 28rpx;
                   color: #666666;
                   line-height: 28rpx;
                   position: relative;
                   padding-left: 25rpx;
                   &::before {
                       content: '';
                       position: absolute;
                       top: 10rpx;
                       left: 0;
                       width: 8rpx;
                       height: 8rpx;
                       background: #666666;
                       border-radius: 50%;
                   }
               }
           	
               .radio-img {
                   width: 32rpx;
                   height: 32rpx;
				   min-width: 32rpx;
               }
               .van-radio--horizontal {
                   margin-right: 0;
               }
               .van-radio__label {
                   font-family: PingFang SC;
                   font-weight: 500;
                   font-size: 32rpx;
                   color: #666666 !important;
                   line-height: 32rpx !important;
                   padding-left: 12rpx;
               }
               .right-icon {
                   margin-left: 16rpx;
                   width: 12rpx;
                   height: 22rpx;
                   background-image: url('https://oss.jtmckj.com/wmp/images/common/i_triangle_right.png');
                   background-size: 100% 100%;
                   background-repeat: no-repeat;
               }
           }
        }
        .programme-showMore {
            text-align: center;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: var(--maincolorf1);
            position: relative;
            line-height: 24rpx;
            padding-bottom: 27rpx;
            padding-top: 13rpx;
            .showMore-icon {
                position: absolute;
                top: 18rpx;
                right: 258rpx;
                width: 18rpx;
                height: 11rpx;
                background-image: url('https://oss.jtmckj.com/wmp/images/common/i_triangle_bottom.png');
                background-size: cover;
                background-repeat: no-repeat;
                &.showALL {
                    transform: rotate(180deg);
                }
            }
        }
    }
    .centerStoreOther-container-button {
        padding-bottom: 28rpx;
        .container-button-item {
            text-align: center;
            background: var(--dt-backcolorPink);
            border-radius: 40rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: var(--maincolor);
            line-height: 32rpx;
            padding: 25rpx 0;
        }
    }
    .centerStoreOther-container-read {
        display: flex;
        align-items: center;
        padding-bottom: 24rpx;
        .van-radio__label--right {
            padding-left: 12rpx !important;
        }
        .radio-icon {
			margin-right: 15rpx;
            width: 32rpx;
            height: 32rpx;
        }
        .container-read-center {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: var(--maincolorf2);
            line-height: 24rpx;
        }
        .container-read-right {
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: var(--dt-colorPink);
            line-height: 24rpx;
        }
    }
}
.selected-scheme {
    border: 1px solid #99948a;
    padding-bottom: 0rpx;
}
.top-meng {
    position: absolute;
    width: 100%;
    height: 480rpx;
    top: 0;
    background: linear-gradient(0deg, #f2f2f2, #fffdf2);
}
::v-deep .van-cell:after { 
	border-bottom: none !important;
}
::v-deep .van-radio__icon {
		display: none;
	}
::v-deep .van-dropdown-menu__bar {
	// background: none !important;
	box-shadow:none !important;
}
::v-deep .van-field__control::placeholder{
	 color: var(--maincolorf4) !important;
	 font-size: 32rpx;
}
::v-deep .van-field__control{
	 color: var(--maincolorf1) !important;
	 font-size: 32rpx;
}
::v-deep .van-dropdown-menu__title {
	display: none !important;
}
::v-deep .van-dropdown-menu__item {
	border-radius: 8rpx;
}
</style>
